<template>
  <el-dialog
    :visible.sync="visible"
    class="dialogStyle"
    :show="show"
    :title="'规则确认——'+title"
    width="60%"
    @close="OnClose()"
  >
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="单期妊娠" name="first">
        <el-table
          :data="ExamData.tableData"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
          stripe
          style="width: 100%"
          border
          height="400px"
        >
          <!-- <el-table-column prop="drugId" label="药物禁忌症" width="100"></el-table-column> -->
          <el-table-column prop="drugName" label="操作" width="100" fixed="left">
            <template slot-scope="scope">
              <el-button type="text" @click="Confirm(scope.row.id,3)">确认</el-button>
              <el-button type="text" @click="Confirm(scope.row.id,1)">作废</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="drugId" label="单期妊娠" width="100"></el-table-column>
          <!-- <el-table-column prop="genId2" label="成分2" width="100"></el-table-column> -->
          <el-table-column prop="routeIds" label="给药途径"></el-table-column>
          <el-table-column prop="routeType" label="给药类型">
            <!-- 给药类型 1  全身给药   2  局部给药  3  所有方式给药   0  系统默认 -->
            <template
              slot-scope="scope"
            >{{(scope.row.routeType==0)?"系统默认":(scope.row.routeType==1)?"全身给药":(scope.row.routeType==2)?"局部给药":(scope.row.routeType==3)?"所有方式给药":""}}</template>
          </el-table-column>
          <!-- <el-table-column prop="routeDesc" label="给药描述"></el-table-column> -->
          <el-table-column prop="slCode" label="警示级别">
            <template slot-scope="scope">
              <!-- 0:拦截，1：禁忌，2：不推荐，3：轻微 -->
              {{(scope.row.slCode==0)?"拦截":(scope.row.slCode==1)?"禁忌":(scope.row.slCode==2)?"不推荐":(scope.row.slCode==3)?"轻微":""}}
            </template>
          </el-table-column>
          <el-table-column prop="pregDaysLow" label="妊娠低值" width="100"></el-table-column>
          <el-table-column prop="pregDaysHigh" label="妊娠高值" width="100"></el-table-column>
          <!-- <el-table-column prop="genId1Name" label="成分1名称" width="100"></el-table-column> -->

          <el-table-column prop="warning" label="警告信息" width="170"></el-table-column>
          <el-table-column prop="title" label="标题" width="170"></el-table-column>

          <el-table-column prop="abstractDesc" label="描述" align="left" width="200">
            <template slot-scope="scope">
              <div v-html="scope.row.abstractDesc"></div>
            </template>
          </el-table-column>

          <el-table-column prop="insert_NAME" label="新增时间" width="160">
            <template slot-scope="scope">{{getdate(scope.row.insert_TIME)}}</template>
          </el-table-column>
          <el-table-column prop="update_TIME" label="更新时间" width="160">
            <template slot-scope="scope">{{getdate(scope.row.update_TIME)}}</template>
          </el-table-column>
          <el-table-column prop="insert_NAME" label="新增人名称" width="95"></el-table-column>
          <el-table-column prop="confirm_NAME" label="确认人名称" width="95"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="this.ExamData.pageSize"
            layout="total, prev, pager, next"
            :total="this.ExamData.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="全期妊娠" name="second">
        <el-table
          :data="ExamAllData.tableData"
          :header-cell-style="{'text-align':'center'}"
          :cell-style="{'text-align':'center',padding:'0px'}"
          stripe
          style="width: 100%"
          border
          height="400px"
        >
          <!-- <el-table-column prop="drugId" label="药物禁忌症" width="100"></el-table-column> -->
          <el-table-column prop="drugName" label="操作" width="100" fixed="left">
            <template slot-scope="scope">
              <el-button type="text" @click="ConfirmAll(scope.row.id,3)">确认</el-button>
              <el-button type="text" @click="ConfirmAll(scope.row.id,1)">作废</el-button>
            </template>
          </el-table-column>
          <el-table-column prop="drugId" label="单期妊娠" width="100"></el-table-column>
          <!-- <el-table-column prop="genId2" label="成分2" width="100"></el-table-column> -->
          <el-table-column prop="routeIds" label="给药途径"></el-table-column>
          <el-table-column prop="routeType" label="给药类型">
            <!-- 给药类型 1  全身给药   2  局部给药  3  所有方式给药   0  系统默认 -->
            <template
              slot-scope="scope"
            >{{(scope.row.routeType==0)?"系统默认":(scope.row.routeType==1)?"全身给药":(scope.row.routeType==2)?"局部给药":(scope.row.routeType==3)?"所有方式给药":""}}</template>
          </el-table-column>
          <!-- <el-table-column prop="routeDesc" label="给药描述"></el-table-column> -->
          <el-table-column prop="slCode" label="警示级别">
            <template slot-scope="scope">
              <!-- 0:拦截，1：禁忌，2：不推荐，3：轻微 -->
              {{(scope.row.slCode==0)?"拦截":(scope.row.slCode==1)?"禁忌":(scope.row.slCode==2)?"不推荐":(scope.row.slCode==3)?"轻微":""}}
            </template>
          </el-table-column>
          <el-table-column prop="pregDaysLow" label="妊娠低值" width="100"></el-table-column>
          <el-table-column prop="pregDaysHigh" label="妊娠高值" width="100"></el-table-column>
          <!-- <el-table-column prop="genId1Name" label="成分1名称" width="100"></el-table-column> -->

          <el-table-column prop="warning" label="警告信息" width="170"></el-table-column>
          <el-table-column prop="title" label="标题" width="170"></el-table-column>

          <el-table-column prop="abstractDesc" label="描述" align="left" width="200">
            <template slot-scope="scope">
              <div v-html="scope.row.abstractDesc"></div>
            </template>
          </el-table-column>

          <el-table-column prop="insert_NAME" label="新增时间" width="160">
            <template slot-scope="scope">{{getdate(scope.row.insert_TIME)}}</template>
          </el-table-column>
          <el-table-column prop="update_TIME" label="更新时间" width="160">
            <template slot-scope="scope">{{getdate(scope.row.update_TIME)}}</template>
          </el-table-column>
          <el-table-column prop="insert_NAME" label="新增人名称" width="95"></el-table-column>
          <el-table-column prop="confirm_NAME" label="确认人名称" width="95"></el-table-column>
        </el-table>
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="this.ExamAllData.pageSize"
            layout="total, prev, pager, next"
            :total="this.ExamAllData.total"
          ></el-pagination>
        </div>
      </el-tab-pane>
    </el-tabs>

    <span slot="footer" class="dialog-footer" style="padding-bottom: 10px;">
      <el-button size="medium" type="primary" @click="Reset1()">重置单期</el-button>
      <el-button size="medium" type="primary" @click="Reset2()">重置全期</el-button>
      <el-button size="medium" @click="OnClose">取 消</el-button>
    </span>
  </el-dialog>
</template>

<script>
// import { title, DrugId } from "../../../../settings";
import {
  getExamData,
  getdate,
  updateExamData,
  getExamAllData,
  updateExamAllData,
} from "@/api/rad";
export default {
  name: "TemplateDialog",
  props: {
    show: { type: Boolean, default: false },
    title: "",
    drugid: "",
    drugCode: "",
  },
  data() {
    return {
      visible: this.show,
      // adultDrugId: "",
      ExamData: {
        page: 1,
        pageSize: 20,
        total: 0,
        tableData: [],
      },
      ExamAllData: {
        page: 1,
        pageSize: 20,
        total: 0,
        tableData: [],
      },

      activeName: "first",
    };
  },
  watch: {
    show: {
      immediate: true,
      handler(show) {
        this.visible = this.show;
      },
    },
  },
  // created: function () {
  //   this.adultDrugId = title;
  //   this.getContrScr();
  // },
  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
      console.log(tab.name);
      if (tab.name == "first") {
        this.getList(this.drugid);
      } else if (tab.name == "second") {
        this.getListAll(this.drugid);
      }
    },
    handleSizeChange(newSize) {
      this.ExamData.pageSize = newSize;
      this.getList(this.drugid);
    },
    handleCurrentChange(newPage) {
      this.ExamData.page = newPage;
      this.getList(this.drugid);
    },
    OnClose() {
      this.$emit("update:show", false);
    },
    getdate(date) {
      return this.$rad.getdate(date);
    },
    async getList(drugid) {
      let res = await this.$rad.getExamData({
        pregnancyDrugId: drugid,
        page: this.ExamData.page,
        pageSize: this.ExamData.pageSize,
      });
      this.ExamData.total = res.total;
      this.ExamData.tableData = res.rows;
      console.log(res);
      // console.log(this.drugid);
    },
    Confirm(id, state) {
      if (state == 3) {
        this.$confirm("此操作将确认该规则, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ConfirmRule(id, state);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if ((state = 1)) {
        this.$confirm("此操作将作废该规则, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ConfirmRule(id, state);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    Confirm(id, state) {
      if (state == 3) {
        this.$confirm("此操作将确认该规则, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ConfirmRule(id, state);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else if ((state = 1)) {
        this.$confirm("此操作将作废该规则, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            this.ConfirmRule(id, state);
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
    async Reset1() {
      console.log(this.drugCode);
      let res = await this.$rad.Resetemptypregnancy({
        drugCode: this.drugCode,
      });
      console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async Reset2() {
      console.log(this.drugCode);
      let res = await this.$rad.ResetemptypregnancyAllday({
        drugCode: this.drugCode,
      });
      console.log(res);
      if (res.code == 1) {
        return this.$message({
          type: "success",
          message: res.msg,
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },
    async ConfirmAll(id, state) {
      let res = await this.$rad.updateExamData({
        id: id,
        state: state,
      });
      console.log(res);
      if (res.code == 1) {
        this.getListAll(this.drugid);
        return this.$message({
          type: "success",
          message: (state == 1 ? "作废" : "确认") + res.msg,
        });
      } else {
        return this.$message({
          type: "error",
          message: res.msg,
        });
      }
    },

    async getListAll(drugid) {
      let res = await this.$rad.getExamAllData({
        pregnancyDrugId: drugid,
        page: this.ExamAllData.page,
        pageSize: this.ExamAllData.pageSize,
      });
      this.ExamAllData.total = res.total;
      this.ExamAllData.tableData = res.rows;
      console.log(this.drugid);
      // console.log(this.drugid);
    },
  },
};
</script>
<style scoped>
.dialogStyle >>> .el-dialog__footer {
  padding-bottom: 10px;
}
</style>